<div class="form-inline operation-details">
  <div class="row">
    <label class="col-xs-4 col-sm-3 form-control-static text-right"
           for="instance">
      {{ 'CAM_WIDGET_SELECTION_TYPE_INSTANCE' | translate }}
      <span class="glyphicon glyphicon-question-sign"
            uib-tooltip="{{ 'CAM_WIDGET_SELECTION_TYPE_INSTANCE_TOOLTIP' | translate }}"
            tooltip-placement="right"></span>
    </label>
    <div class="col-xs-6 col-sm-9">
      <input type="radio"
             name="selection_type"
             id="instance"
             class="form-control operation-radio"
             ng-model="selectionType"
             value="INSTANCE" />
    </div>
  </div>
  <div class="row">
    <label class="col-xs-4 col-sm-3 form-control-static text-right"
           for="query">
           {{ 'CAM_WIDGET_SELECTION_TYPE_QUERY' | translate }}
      <span class="glyphicon glyphicon-question-sign"
            uib-tooltip="{{ 'CAM_WIDGET_SELECTION_TYPE_QUERY_TOOLTIP' | translate }}"
            tooltip-placement="right"></span>
    </label>
    <div class="col-xs-6 col-sm-9">
      <input type="radio"
             name="selection_type"
             id="query"
             class="form-control operation-radio"
             ng-model="selectionType"
             value="QUERY" />
    </div>
  </div>   
</div>

<div class="instance"
     ng-if="selectionType === 'INSTANCE' && toggleState === 'on' && totalInstancesCount > pageSize">
  <div class="alert alert-info">
    <p>{{ 'CAM_WIDGET_SELECTION_TYPE_INSTANCE_INTRO' | translate }} {{ selectedInstancesCount }} {{ 'CAM_WIDGET_SELECTION_TYPE_INSTANCES' | translate }}. </p><br />
    <p>
      <a ng-click="updateSelectionType('QUERY')">{{ 'CAM_WIDGET_SELECTION_TYPE_INSTANCE_LINK' | translate }}</a>
    </p>
  </div>
</div>

<div class="query"
     ng-if="selectionType === 'QUERY'">
  <div class="alert alert-warning">
    <p><strong>{{ 'CAM_WIDGET_SELECTION_TYPE_QUERY_INTRO' | translate }}</strong></p><br />
    <p>
      <strong>{{ 'CAM_WIDGET_SELECTION_TYPE_WARNING' | translate }}</strong> {{ 'CAM_WIDGET_SELECTION_TYPE_QUERY_WARNING' | translate }}
    </p><br />
    <p>
      <a ng-click="updateSelectionType('INSTANCE')">{{ 'CAM_WIDGET_SELECTION_TYPE_QUERY_LINK' | translate }} <strong>{{ 'CAM_WIDGET_SELECTION_TYPE_INSTANCE' | translate }}</strong></a>
    </p>
  </div>
</div>
